<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>百度地图测试</title>
    <style type="text/css">
      html {
        height: 100%;
      }

      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }

      #container {
        height: 600px;
        width: 800px;
      }

      .anchorBL {
        display: none;
      }

      .BMap_stdMpZoom {
        display: block;
      }
      #tools {
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 10;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <div id="tools">
      <button id="start">开始播放</button>
      <button id="end">停止播放</button>
    </div>
    <script>
      function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        // callback 定义 加载后 执行的函数
        script.src =
          "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=yvu4YGW9MmqqgipzLiiwtX6Yk7SvIFSF&callback=init";
        document.body.appendChild(script);
        //绘制图标
      }
      function init() {
        // console.log(window.BMapGL)  // 地图对象
        var map = new BMapGL.Map("container");
        var point = new BMapGL.Point(116.404, 39.915); // 北京市中心坐标点
        map.centerAndZoom(point, 20, {
          minZoom: 5,
          maxZoom: 14,
          mapType: BMAP_NORMAL_MAP,
        }); // 显示地图, 传入 中心点 与 MapOption
        map.enableScrollWheelZoom(true); // 允许滚轮放大
        map.setHeading(0);
        map.setTilt(0);
        // 添加缩放控件
        var zoomCtrl = new BMapGL.ZoomControl({
          anchor: BMAP_ANCHOR_BOTTOM_LEFT,
        });
        // 添加缩放控件
        map.addControl(zoomCtrl);
        // 添加事件
        map.addEventListener("zoomstart", function () {
          console.log(map.getZoom()); // 返回 zoom前的值
        });
        // 添加控件 标尺
        var scaleCtrl = new BMapGL.ScaleControl({
          anchor: BMAP_ANCHOR_TOP_LEFT,
          offset: new BMapGL.Size(10, 10),
        });
        map.addControl(scaleCtrl);
        // 添加视角动画
        // 1.定义关键帧
        var keyFrames = [
          {
            center: new BMapGL.Point(116.307092, 40.054922),
            zoom: 20,
            tilt: 50,
            heading: 0,
            percentage: 0,
          },
          {
            center: new BMapGL.Point(116.307631, 40.055391),
            zoom: 21,
            tilt: 70,
            heading: 0,
            percentage: 0.1,
          },
          {
            center: new BMapGL.Point(116.306858, 40.057887),
            zoom: 21,
            tilt: 70,
            heading: 0,
            percentage: 0.25,
          },
          {
            center: new BMapGL.Point(116.306858, 40.057887),
            zoom: 21,
            tilt: 70,
            heading: -90,
            percentage: 0.35,
          },
          {
            center: new BMapGL.Point(116.307904, 40.058118),
            zoom: 21,
            tilt: 70,
            heading: -90,
            percentage: 0.45,
          },
          {
            center: new BMapGL.Point(116.307904, 40.058118),
            zoom: 21,
            tilt: 70,
            heading: -180,
            percentage: 0.55,
          },
          {
            center: new BMapGL.Point(116.308902, 40.055954),
            zoom: 21,
            tilt: 70,
            heading: -180,
            percentage: 0.75,
          },
          {
            center: new BMapGL.Point(116.308902, 40.055954),
            zoom: 21,
            tilt: 70,
            heading: -270,
            percentage: 0.85,
          },
          {
            center: new BMapGL.Point(116.307779, 40.055754),
            zoom: 21,
            tilt: 70,
            heading: -360,
            percentage: 0.95,
          },
          {
            center: new BMapGL.Point(116.307092, 40.054922),
            zoom: 20,
            tilt: 50,
            heading: -360,
            percentage: 1,
          },
        ];
        var opts = {
          duration: 10000, // 总时间
          delay: 5000, // 多少秒后开始播放
          interation: "INFINITE", // 播放次数
        };
        // 2.声明动画对象
        var animation = new BMapGL.ViewAnimation(keyFrames, opts);
        // 3.添加事件
        document.getElementById("start").addEventListener("click", function () {
          map.startViewAnimation(animation); // 开始播放动画
        });
        document.getElementById("end").addEventListener("click", function () {
          map.cancelViewAnimation(animation); // 强制停止动画
        });
      }
      window.onload = loadJScript; //异步加载地图
    </script>
  </body>
</html>
